<template>
  <div>
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      表单输入绑定
    </div>
    <a-divider />
    <div>
      <a-input
        :value="text"
        @input="(event) => (text = event.target.value)"
        placeholder="通过监听输入绑定"
      />
      <p></p>
      <a-input v-model:value="text" placeholder="通过model输入绑定" />
      <p></p>
      <div>新的值是：{{ text }}</div>
      <p></p>
    </div>
    <div>
      <a-divider />
      <a-button
        type="primary"
        @click="this.checkbox = !this.checkbox"
        style="margin-right: 8px"
        >切换复选框状态 </a-button
      ><a-checkbox v-model:checked="checkbox">Checkbox</a-checkbox>
    </div>
    <a-divider />
    <span style="float: left"
      >Multiline message is: <span style="color: green">{{ message }}</span>
    </span>
    <a-textarea
      v-model:value="message"
      placeholder="add multiple lines"
    ></a-textarea>
    <a-divider />
    <div>
      <a-tag
        :color="item.split(',')[1]"
        v-for="(item, index) of checkValue"
        :key="index"
        >{{ item.split(",")[0] }}</a-tag
      >
      <a-checkbox-group v-model:value="checkValue" style="width: 100%">
        <a-row>
          <a-col :span="8">
            <a-checkbox value="A,pink">A</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="B,red">B</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="C,orange">C</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="D,green">D</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="E,cyan">E</a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </div>
    <a-divider />
    <div>
      <div>Selected:{{ selected }}</div>
      <a-select ref="select" v-model:value="selected" style="width: 120px">
        <a-select-option value="jack">Jack</a-select-option>
        <a-select-option value="lucy">Lucy</a-select-option>
        <a-select-option value="disabled" disabled>Disabled</a-select-option>
        <a-select-option value="Yiminghe">yiminghe</a-select-option>
      </a-select>
    </div>
    <a-divider />
    toggle:{{ toggle }}
    <a-checkbox
      type="checkbox"
      style="width: 120px"
      v-model:checked="toggle"
      true-value="yes"
      false-value="no"
    />
    <a-divider />
    {{ selectedObject }}
    <select v-model="selectedObject">
      <!-- 内联对象字面量 -->
      <option :value="{ number: 123 }">123</option>
    </select>
    <a-divider />
    <div style="text-align: left">
      <!-- 在 "change" 事件后同步更新而不是 "input" -->
      <div>使用了 v-model:value.trim.lazy</div>
      <div>
        所以当值发生变化（焦点移除）时才会同步数据，并且会去除两边的空格
      </div>
      <div>值如下：{{ msg }}</div>
      <a-input v-model:value.trim.lazy="msg" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 12465,
      checkbox: false,
      message: null,
      checkedNames: [],
      checkValue: [],
      selected: [],
      selectedObject: null,
      toggle: null,
      value1: null,
      msg: null,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style></style>
